<template>
  <div>
    <el-button type="primary" icon="el-icon-search" plain style="margin-bottom: 20px" @click="dialogMemberChoose = true">
      选择会员
    </el-button>
    <el-card shadow="hover" :body-style="{ padding: '0px' }">

      <u-table
        :data="list"
        :page="false"
        :columns="columns"
        :options="{ headerCellStyle: { background:'#FAFAFA'} }"
      >
        <template v-slot:right>

          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="remove(row)">移除</el-button>
            </template>
          </el-table-column>

        </template>
      </u-table>

    </el-card>

    <!-- 会员选择器 -->
    <member v-model="dialogMemberChoose" :multiple="multiple" :data="list" @change="changeData" />

  </div>

</template>

<script>
/**
 * 业务组件 - 会员选择组件
 */
import member from '@/components/member/member'
export default {
  name: 'UesMember',
  components: {
    member
  },
  props: {
    /** 数据源 */
    value: {
      type: String,
      default: ''
    },
    /** 是否多选,默认单选 */
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      api: this.$u.api.MemberData,
      // 选择的会员
      columns: [
        {
          prop: 'member_name',
          label: '姓名',
          width: '120'
        },
        {
          prop: 'card_no',
          label: '会员卡号',
          width: '120'
        },
        {
          prop: 'mobile',
          label: '手机号'
        },
        {
          prop: 'openid',
          label: 'OPENID',
          width: '220'
        },
        {
          prop: 'level_name',
          label: '等级'
        },
        {
          prop: 'input_date',
          label: '注册时间'
        }
      ],
      // 选中的优惠券
      list: [],
      // 会员选择器弹窗状态
      dialogMemberChoose: false
    }
  },
  watch: {
    // 监听数据
    value: {
      immediate: true,
      handler(val) {
        // 初始化数据
        this.loadData(val)
      }
    }
  },
  methods: {
    // 初始化数据
    async loadData(val) {
      // console.log('初始化 -> 准备初始化')
      // console.log(val)
      if (val) {
        // console.log('初始化 -> 有数据')
        // console.log(this.list)
        // console.log(this.list.length)

        if (this.list.length === 0) {
          // console.log('初始化 -> 执行加载数据,列表无数据')
          this.list = []
          const ids = val.split(',')
          for (const id of ids) {
            const res = await this.api.fetch({ id })
            const { data } = res
            if (data) {
              this.list.push(data)
            }
          }
        } else {
          // console.log('初始化 -> 执行验证数据,列表有数据')
        }
      } else {
        // console.log('初始化 -> 无数据')
        this.list = []
      }
      // 绑定选中的数据
      // console.log('初始化 -> 绑定选中的数据')
      // console.log(this.list)
    },
    // 通知数据更新
    change() {
      const { list } = this
      // console.log('通知 -> 数据更新')
      // console.log(list)

      // 获取数组ID
      let ids = []
      if (list.length > 0) {
        ids = list.map(item => { return item.card_no })
      }
      // console.log('通知 -> 数据结果')
      // console.log(ids.toString())

      // 通知数据 -> 绑定数据,返回为字符串 1,2,3
      this.$emit('input', ids.toString())
      // 通知数据 -> 绑定值被改变时触发,返回为数组列表
      this.$emit('change', list)
    },
    // 移除会员
    remove(row) {
      const self = this
      this.$confirm('确认移除【' + row.member_name + '】会员吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        // 处理确认事件
        self.list.splice(self.list.findIndex(item => item.card_no === row.card_no), 1)
        // 通知数据更新
        self.change()
      }).catch(() => {
      })
    },
    // 监听 -> 选中变动数据
    changeData(list) {
      // 通知数据更新
      this.list = list
      this.change()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-input{
    width: 100% !important;
  }
}
</style>
